// --------------------------------------------------------------------
// -- document（文档对象模型）
// --------------------------------------------------------------------
/*
    每个载入浏览器的 HTML 文档都会成为 document 对象。
    document 对象使我们可以在脚本中对 HTML 页面中的所有元素进行访问和操作。
*/

// -----------------------------
// 1. 查看document对象
// -----------------------------
/*
    document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问。
*/
// 1.1 打印 document 对象, 并查看其相关属性、方法和原型链

// console.log(window.document);

// -----------------------------
// 2. 在页面输出内容
// -----------------------------
/*
    document.write() // 在页面输出内容
    document.writeln() // 同上，但是会增加 "\n" 换行符号
 */
// 2.1 在页面输出内容：document对象使用操作html标签的对象

// document.write("...");
// document.write("\n" + "....");
// document.writeln("\n" + ".....");   //write和writeln之间不会换行
// document.writeln("......");
// document.writeln(".......");

// 2.2 在页面使用 writeln 分别输出内容：hello和world

// document.write("hello", "world");
// document.writeln("hello", "world");
// document.writeln("hello", "world");
// 浏览器在执行HTML的时候,只认识HTML标签,
// 而浏览器中要显示换行的效果,就要使用<br/>标签,
// <br/>标签才能换行.writeln()函数是达不到浏览器显示换行效果的。

// -----------------------------
// 3. 获取元素（HTMLElement）(Element)
// -----------------------------
/*
    document.getElementById() // 返回对拥有指定 id 的第一个对象的引用。
    document.getElementsByName() // 返回带有指定名称的对象集合（HTMLCollection ）。
    document.getElementsByTagName() // 返回带有指定标签名的对象集合（HTMLCollection ）。
    document.getElementsByClassName() // 返回带有指定标类名的对象集合（HTMLCollection ）。
 */
// 3.1 获取id为 learning-target 的对象，查看其原型链, 尝试打印其中认识的属性和方法

// console.log(document.getElementById("learning-target"));
// console.log(document.getElementById("learning-target").innerHTML);

// 3.2 获取name为 phone 的对象，查看其原型链, 尝试遍历, 打印其中认识的属性和方法

// let inputNameList = document.getElementById("phone");
// console.log(inputNameList);
// for (let item of inputNameList){
//     console.log("标签名:", item.tagName);
//     console.log("值", item.value);
// }

// 3.3 获取页面所有的 img 对象，查看其原型链，尝试遍历, 打印其中认识的属性和方法

// let imgList = document.getElementById("img");
// console.log("imglist", imgList);
// for (let item of imgList){
//     console.log("标签名:", item.tagName);
//     console.log("src:", item.src);
// }

// 3.4 获取页面 class 为 content-p 的对象，查看其原型链，尝试遍历, 打印其中认识的属性和方法

// let contentPList = document.getElementById("content-p");
// for (let item of contentPList){
//     console.log("标签名:", item.tagName);
//     console.log("标签名的内容:", item.innerHTML);
// }

// -----------------------------
// 4. 获取和设置属性
// -----------------------------
/*
    HTMLElement.attributes // 获取所有属性
    HTMLElement.getAttribute(属性名) // 获取指定的属性值
    HTMLElement.setAttribute(属性名, 属性值) // 设置指定的属性值

    HTMLElement.属性名 // 获取指定的属性值
    HTMLElement.属性名 = 属性值 // 设置指定的属性值
 */
// 4.1 获取id为test-img对象，当鼠标悬浮时切换成毕业后的图片，鼠标离开后切换回去

// document.getElementById("test-img").onmouseover = function () {
//     this.src = "image/毕业后.jpg";
// }
// document.getElementById("test-img").onmouseleave = function () {
//     this.src = "image/毕业前.jpg";
// }

// 4.2 获取name为phone文本框的输入的内容

// let phoneList = document.getElementsByName("phone");
// for (let item of phoneList){
//     console.log(item.value);    //13950508888
// }

// 4.3 修改name为phone的文本框内容为: 13950505050

// setInterval(function () {   //计时器
//     let phoneList = document.getElementsByName("phone");
//     for (let item of phoneList){
//         item.value = "13950505050";
//     }
// }, 3000);   //三秒后更替

// 4.4 对比用setAttribute 和 直接用属性名获取的不同

// setTimeout(function () {
//     let phoneList = document.getElementsByName("phone");
//     for (let item of phoneList){
//         item.value = "13950508888";
//         // item.setAttribute("value", "13950508888"); //猜测:用此语法会与setInterval冲突
//     }
// }, 4000);

// -----------------------------
// 5. 获取和设置样式
// -----------------------------
/*
    HTMLElement.style // 获取行内样式

    HTMLElement.style.样式名 = 样式值 // 设置相关样式
 */
// 5.1 获取页面所有的img元素， 打印出边框样式。

// let imgList = document.getElementsByTagName("img");
// for (let item of imgList){
//     console.log(item);
//     console.log(getComputedStyle(item, null).getPropertyValue("border"));
// }

// 5.2 获取页面所有img元素，当鼠标悬浮时将边框颜色改成黑色#666，鼠标离开后恢复成#aaa

// let imgList = document.getElementsByTagName("img");
// for (let item of imgList){
//     item.onmouseover = function () {
//         item.style.borderColor = "#666";
//     };
//     item.onmouseleave = function () {
//         item.style.borderColor = "#aaa";
//     };
// }

// -----------------------------
// 6. 获取和设置元素内的内容
// -----------------------------
/*
    HTMLElement.innerHTML // 获取和设置标签内的内容，支持html标签文本
    HTMLElement.outerHTML // 获取和设置标签(包含这个标签)的内容，支持html标签文本

    HTMLElement.innerText // 获取和设置标签内的内容，会将html标签转义
 */
// 6.1 获取id为article-content的 innerHTML、outerHTML、innerText, 并对比有什么不同。

// console.log("innerHTML", document.getElementById("article-content").innerHTML);
// console.log("outerHTML", document.getElementById("article-content").outerHTML);
// console.log("innerText", document.getElementById("article-content").innerText);

// 6.2 将id为article-content的标签内容替换为：<p>我是通过innerHTML插入进来的</p>

// document.getElementById("article-content").innerHTML = "<p>我是通过innerHTML插入进来的</p>";

// 6.3 设置内容时, innerHTML、outerHTML、innerText 三个属性设置有什么不同?


// -----------------------------
// 7. 获取父节点和子节点
// -----------------------------
/*
    HTMLElement.parentNode // 获取父类元素
    HTMLElement.children // 获取子类元素,只包含标签
    HTMLElement.childNodes// 获取子类元素,包含文本节点
 */
// 7.1 获取id为header-nav的父类元素

// console.log(document.getElementById("header-nav").parentNode.parentNode.innerHTML);

// 7.2 遍历id为header-nav的对象子元素,children和childNodes有什么不同呢?

// let childrenList = document.getElementById("header-nav").children;
// for (let item of childrenList){
//     console.log(item.href);
// }
// let childNodes = document.getElementById("header-nav").childNodes;
// for (let item of childNodes){
//     console.log(item);
// }

// -----------------------------
// 8. 创建元素、增加元素和删除元素
// -----------------------------
/*
    document.createElement() // 创建一个指定标签名的元素
    HTMLElement.appendChild() // 将一个节点附加到指定父节点的子节点列表的末尾处
    HTMLElement.insertBefore() // 在参考节点之前插入一个拥有指定父节点的子节点
    HTMLElement.removeChild() // 移除已存在的元素
 */
// 8.1 大家看看这边js代码是不是很多了？上下拖不太方便了，有什么好的办法吗？

//src新建js文件优点:主html文件代码更加简洁,想更改更容易,某些代码类似settimeout会有提示词
//缺点:文件多了,切换麻烦
//查一下访问一个网址,从技术角度了解背后发生了什么?
//使用谷歌游览器访问4399,从技术角度了解,直接右键检查,
// 先看console,一堆错误,猜测是爬虫扒的游戏失效了
// 然后看Sources来源,发现都是链接没有Network直观
// 接着看Network,发现最多的是图片img,
// js的使用频率高12个,其中内容以函数为主.
// css样式较少,内容主要在base.css(基css)

// 8.2 查看网易新闻, 在id为 header-nav 标签下增加新的分类元素。

let aElement = document.createElement("a");
aElement.innerHTML = "NBA";
aElement.href = "https://sports.163.com/nba/";
console.log(aElement);
let headerNavElement = document.getElementById("header-nav");
headerNavElement.appendChild(aElement);

// 8.3 上例是增加到尾巴处,有没有办法增加到最前面?

headerNavElement.insertBefore(aElement, headerNavElement.firstChild);
//思考一下为什么没有插入到后面?
//因为insert插入的关键词是before
//思考一下怎么插入到财经前面.

// 8.4 移除上面新增加的元素。

headerNavElement.removeChild(headerNavElement.firstChild);

//打开页面三秒后，删除id为header-nav的标签和下面的内容
// setTimeout(function () {
//     console.log(document.getElementById("header-nav").outerHTML = "");
// },3000);

// ----------------------------------------------------
// -- 练习
// ----------------------------------------------------
// 1. 设计网易新闻的父类下拉框和子类下拉框, 当父类改变时, 子类下拉框相应切换
// 2. 做一个简单的动画效果：
//      有一个外层div, 宽500px, 高为500px
//      里面有一个div, 宽和高都为20px, 可以从左上角移动到右下角
// 3. 模仿B站做一个简单的弹幕效果。
// 4. 5张图轮播, 模拟轮播图效果。模拟: https://36kr.com/

